﻿<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
h3{
text-align: center;
color: #fff;
}
	body{
		background: #000;
	}
	#box{
		width: 200px;
		height: 200px;
		margin:150px auto;
		background: #ccc;
		position: relative;
		transform:perspective(800px) rotateY(-60deg) rotateX(45deg);
		transform-style:preserve-3d;
	}
	#box div{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left: 0;
		background-size:cover; 
		-webkit-box-shadow:0 0 100px #fff;
		opacity: .8;
	}
	.front{
		transform:translateZ(100px);
		background:#ffd75d;
	}
	.back{
		transform:translateZ(-100px);
		background:#ccc;
	}
	.left{
		transform:translateX(-100px) rotateY(90deg);
		background:red;
	}
	.right{
		transform:translateX(100px) rotateY(90deg);
		background:cyan;
	}
	.top{
		transform:translateY(-100px) rotateX(90deg);
		background:#fff;
	}
	.bottom{
		transform:translateY(100px) rotateX(90deg);
		background:#29009d;
	}
</style>
<script>
	window.onload=function(){
		var oBox=document.querySelector('#box');

		var y=-60;
		var x=45;
		oBox.onmousedown=function(ev){
			var oEvent=ev||event;
			var disX=oEvent.clientX-y;
			var disY=oEvent.clientY-x;
			document.onmousemove=function(ev){
				var oEvent=ev||event;
				x=oEvent.clientY-disY;
				y=oEvent.clientX-disX;
				oBox.style.transform='perspective(800px) rotateX('+x+'deg) rotateY('+y+'deg)';
			};
			document.onmouseup=function(){
				document.onmousemove=null;
				document.onmouseup=null;
			};
			return false;
		};
	};
</script>
</head>
<body>
<h3>纯原生没有用任何框架哦</h3>
<div id="box">
	<div class="front"></div>
	<div class="back"></div>
	<div class="top"></div>
	<div class="bottom"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>
</body>
</html>
